<template>
	<view class="all_body">
		<!-- ----------------------------- -->
		<view class="item" v-for="(item,index) in friendNoteArray" :key="index">
			<view class="body_head">
				<view class="body_image"><image src="../../static/image/cat.jpeg" mode="widthFix"></image></view>
				<view class="body_text">
					<view class="body_name">{{item.user}}</view>
					<view class="body_time">{{item.data}}</view>
				</view>
			</view>
			
			<view class="friend_text">
				{{item.text}}
			</view>
			<view class="friend_image">
				<image src="../../static/image/foot.jpeg" mode=""></image>
			</view>
			
			<view class="other_behaviour">
				<view class="other_redu">
					<view class="iconfont icon-redu1"></view>
					<view style="color: #ff2222;">热度{{dianzan? item.redu+1:item.redu}}°C</view>
				</view>
				<view class="other_active">
					<view :class="[ 'iconfont'  , dianzan ? 'icon-dianzan1' : 'icon-dianzan' ]" @click="dianzan=!dianzan"></view>
					<view class="iconfont icon-pinglun"></view>
					<view class="iconfont icon-zhuanfa1"></view>
				</view>
			</view>
			
			<view class="iconfont icon-dianzan zanText">{{dianzan? username :''}}.等19人觉得很赞</view>
			<view v-for="item in pinlunArray" class="friendPinlun">{{username}}:{{item}}</view>
			<view class="pinlun"><input type="text" value="" placeholder="评论"  placeholder-style="color:#fff ;font-size:25rpx " v-model="inputVal" confirm-type="search" @confirm="search()" /></view>

			
			
		</view>
		
		
		<!-- -------------------------------------- -->
		
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();

	export default {
		data(){
			return {
				friendNoteArray:[],
                dianzan:false,
				username:'',
				inputVal:'',
				pinlunArray:[],
				// lastRecord: ''
			
			}
		},
		methods:{
		  requestFriendNote(parmas){//请求好友日记数据
		  let that = this
			  uni.request({
			  	url:'http://localhost:4008/bady/findBabyFriendNote',
			  				data:parmas,
			  				method:"POST",
			  				success(res) {
			  					// that.friendNoteArray = res.data.data
								res.data.data.forEach(item=>{
									item.redu =Math.floor( Math.random()*1000)
								})
								that.friendNoteArray = res.data.data
			  				}
			  })		
		  },
		 search(){//发表评论功能
			 this.pinlunArray.push(this.inputVal)
			 this.inputVal = ''
		 },
		
		 // playVoice(url) { // url即为音频路径
		 // 	if (url) {
		 // 		// 判断路径是否已经被赋值，以及音频播放状态 !innerAudioContext.paused为正在播放
		 // 		if (this.lastRecord == url && !innerAudioContext.paused) {
		 // 			innerAudioContext.stop();  // 停止
		 // 			return;
		 // 		}
		 // 		this.lastRecord = url; 			// 将路径赋值给定义的变量好做判断
		 // 		innerAudioContext.src = url;  	// 配置音频播放路径
		 // 		innerAudioContext.play();		// 播放
		 // 		innerAudioContext.loop = true	// 是否循环播放
		 // 	}
		 // }

		 
		 
		 
		 
		},
		onLoad(e) {
			console.log(e)
			this.requestFriendNote({username:e.friendname})
			this.username = uni.getStorageSync("user")[0].us
		
			// this.playVoice('https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3')
		},
		
		computed:{
			
			
			
			
		}
		
		
		
		
		
		
		
		
		
		
		
	}
</script>

<style lang="less">
	.all_body{
		
	}
  .item{
	  width: 95%;
	  // height: 800rpx;
	  margin: auto;	
	  background: #fff;
	  border-bottom: 1rpx solid #03f4c8;
	
	  .body_head{
		  width: 100%;
		  height: 100rpx;
		  // background: purple;
		  display: flex;
		  align-items: center;
		  .body_image{
			  image{
				  width: 70rpx;
				  height: 70rpx;
				  border-radius: 100%;
			  }
		  }
		  .body_text{
			  margin-left: 20rpx;
			  .body_time{
				  margin-top: 15rpx;
				  font-size: 20rpx;  
			  }
		  }
	  }
	  
	  
	  .friend_image{
		  width:100% ;
		  margin-bottom: 20rpx;
		  image{
			 width: 100%;
			 height: 350rpx;
		  }
	  }
	  .other_behaviour{
		  display: flex;
		  justify-content: space-between;
		  padding-bottom: 20rpx;
		  border-bottom: 1rpx solid #ccc;
		  .other_redu{
			
			  display: flex;
		  }
		  .other_active{
	         width: 35%;
			  display: flex;
			  justify-content: space-between;
		  }	  
	  }
	  
	  .zanText{
		  font-size: 30rpx !important;
		  width: 100%;
		  height: 60rpx;
		  line-height: 60rpx;
		 
	  }
	  .friendPinlun{
		  margin-bottom: 20rpx;
	  }
	  .pinlun{
		  width: 100%;
		  height: 50rpx;
		  margin-bottom: 30rpx;
		  background: #c0c0c07d;
		  input{
			  width: 100%;
			  height: 100%;
			  padding-left: 20rpx;
			  font-size: 30rpx;

			 
		  }
	  }
	  
	  
	
  }
  .icon-redu1{
	  font-size: 30rpx !important;
	  color:  #ff2222 !important;
	  margin-right: 10rpx;
  }
  .icon-dianzan{
	  font-size: 50rpx !important;
  }
  .icon-dianzan1{
	  color: #ff2222;
	  font-size: 50rpx !important;
  }
  .icon-pinglun{
  	  font-size: 50rpx !important;
  }
  .icon-zhuanfa1{
  	  font-size: 50rpx !important;
  }


	
	
</style>
